<template>
	<div class="banner">
		<swiper :options="swiperOption">
		    <swiper-slide v-for='item in flash'>
	    		<img :src="item.thumb">
	   		</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		<div class="header">
			<router-link to='/city' tag='span'><span>{{cityName}}<i class="iconfont">&#xe649;</i></span></router-link><p><i class="iconfont">&#xe66b;</i>最美秋色</p><span class="iconfont" @click='tan'>&#xe626;</span>
		</div>
		<div class="blank" id="blank">
			<div class="blank1">
				<div class="you">注册/登录</div>
				<div class="sou">
					<p><i class="iconfont">&#xe66b;</i><input type="text" placeholder="最美秋色"></p>
				</div>
				<li>首页</li>
				<li>游侠攻略</li>
				<li>视频</li>
				<li>游记</li>
				<li>目的地</li>
				<li>圈子</li>
				<li>集市</li>
				<li>民宿营地</li>
				<li>APP</li>
			</div>
			<div class="blank2" @click='hui'></div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		computed:{
			...mapState([
				'cityName'
			])
		},
		props:['flash'],
		data() {
			return {
				ok:false,
			    swiperOption: {
			    	loop:true,
			    	pagination: {
			            el: '.swiper-pagination'
			        },

			    }
			}
		},
		methods:{
			tan(){
				blank.style.left=0;
			},
			hui(){
				blank.style.left=-100+'%';
			}
		}
	}
</script>

<style lang='stylus' scoped>
li{
	list-style: none;
	color: #fff;
	padding:.4rem;
	font-size: .45rem;
	border-bottom: 1px solid #1c1c1c;
}
	.banner{
		position: relative;
		width: 100%;
	}
	.banner img{
		width:100%;
	}
	.swiper-pagination >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
	.header{
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		box-sizing: border-box;
		top: 0;
		left: 0;
		color: #fff;
		z-index: 9;
		align-items: center;
		padding:10px;
		span{
			font-size: .55rem;
		}
		p{
			background: #fff;
			color: #ccc;
			font-size: .45rem;
			flex:1;
			margin:0 10px;
			padding:5px 10px;
			border-radius:.14rem;
			i{
				margin:0 6px;
			}
		}
	}
	.blank{
		width: 100%;
		height: 100vh;
		z-index: 99999;
		top: 0;
		left:-100%;
		position: fixed;
		transition: .5s;
		display: flex;
		.blank1{
			width: 70%;
			background: #2d2d2d;
		}
		.blank2{
			width: 30%;
		}
	}
	.you{
		padding:.6rem .26rem;
		color: #fff;
		text-align: right;
		font-size: .4rem;
	}
	.sou{
		width: 100%;
		border-bottom: 1px solid #1c1c1c;
		padding-bottom: .4rem;
		p{
			width: 86%;
			font-size: .5rem;
			margin-left: 7%;
			background: #1b1b1b;
			display: flex;
			align-items: center;
			padding:.2rem 0;
			border-radius: .2rem;
			input{
				border:none;
				outline: none;
				background: #1b1b1b;
				font-size: .45rem;
				width: 70%;
			}
			i{
				color: #acacac;
				font-size: .5rem;
				padding:0 .2rem;
			}
		}
	}
</style>
